<template>
	<view class="wifi-container">
		<view  class="wifi-list flexWarpColumn">
			<view v-for="(item,index) in  deviceWifiList" :key="index">
				<view class="device-name">
					<text class="lable">设备：</text>{{item.device_name}}
				</view>
				<view class="input-item">
					<text class="lable">WiFi名称：</text>
					<input type="text"
						v-model="item.wifi_name"  
						maxlength="15"
						placeholder="请输入名称" 
						placeholder-class="placeholderClass"
						@paste="onPaste"/>
				</view>
				<view class="input-item">
					<text class="lable">密码：</text>
					<input type="text"
						v-model="item.wifi_psd"
						placeholder="请输入密码" 
						placeholder-class="placeholderClass"/>
				</view>
			</view>
		</view>
		<view class="remark">备注：仅支持2.4GWiFi网络，请勿将盒子使用网络开放给用户。</view>
		<view class="operate-btn">
			<view class="test">检测</view>
			<view class="save" @tap="handleSave">保存</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				deviceWifiList:[],
			}
		},
		onLoad() {
			this.queryWifi()
		},
		methods:{
			onPaste(event) {
				// 处理粘贴时的内容限制
			    const clipboardData = event.clipboardData || window.clipboardData;
			    const pastedText = clipboardData.getData('text');
			
			    // 允许最多粘贴的字符
			    const maxLength = 15;
			    const remainingText = pastedText.slice(0, maxLength+1);
			
			    // 阻止默认粘贴行为并手动将处理后的文本设置到输入框
			    event.preventDefault();
			    // 这里需要使用$nextTick确保输入框的值被更新
			    this.$nextTick(() => {
			      event.target.value = remainingText;
			    });
			},
			
			handleSave(){
				let data=[]
				this.deviceWifiList.forEach(item=>{
					if(!(item.wifi_name==''&&item.wifi_psd=='')){
						data.push({
							device_id:item.device_id,
							wifi:item.wifi_name,
							wifi_pwd:item.wifi_psd,
						})
					}
					
				})
				
				this.$request.post(this.$api.setWifi, {
					data:JSON.stringify(data)
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				})
			},
			
			// 
			queryWifi(){
				this.$request.post(this.$api.queryWifi, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						console.log(data,"设备信息")
						this.deviceWifiList=data
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.wifi-container{
		padding: 40rpx;
		display: flex;
		flex-direction: column;
	}
	.wifi-list{
		gap: 40rpx;
		.device-name{
			color: #fff;
			font-size: 34rpx;
			margin-bottom: 30rpx;
			.lable{
				color: rgba(255, 255, 255, 0.6);
			}
		}
		.input-item{
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			.lable{
				flex-shrink: 0;
				color: rgba(255, 255, 255, 0.6);
				width: 170rpx;
			}
			input{
				flex: 1;
				height:60rpx;
				padding: 0 20rpx;
				border: 2rpx solid rgba(255, 255, 255, 0.6);
				color:#fff;
				font-size: 28rpx;
			}
			
			/deep/.placeholderClass{
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.6);
				line-height: 33rpx;
			}
		}
	}
	.remark{
		margin-top: 20rpx;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
	}
	.operate-btn{
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
		gap: 50rpx;
		>view{
			width: 170rpx;
			padding: 14rpx;
			box-sizing: border-box;
			color: #fff;
			font-size: 26rpx;
			letter-spacing: 2rpx;
			text-align: center;
			border-radius: 8rpx;
		}
		.test{
			background: rgba(86, 119, 252, 1);
		}
		.save{
			background: rgba(31, 124, 247, 1);
		}
	}
</style>